<template>
  <div class="app-container dialog-body" :style="{height:height+120+'px'}">
    <el-card v-loading="loadNum" class="box-card">
      <el-row :gutter="10">
        <el-col :sm="4">
          <el-card class="box-card" :body-style="cardBodyStyle">
            <div slot="header" class="clearfix">
              <span>总计</span>
            </div>
            <div class="text color-tot">
              {{ count.total }}
            </div>
          </el-card>
        </el-col>
        <el-col :sm="3">
          <el-card class="box-card" :body-style="cardBodyStyle">
            <div slot="header" class="clearfix">
              <span>昨天</span>
            </div>
            <div class="text">
              {{ count.yesterday }}
            </div>
          </el-card>
        </el-col>
        <el-col :sm="3">
          <el-card class="box-card" :body-style="cardBodyStyle">
            <div slot="header" class="clearfix">
              <span>今天</span>
            </div>
            <div class="text">
              {{ count.today }}
            </div>
          </el-card>
        </el-col>
        <el-col :sm="3">
          <el-card class="box-card" :body-style="cardBodyStyle">
            <div slot="header" class="clearfix">
              <span>本周</span>
            </div>
            <div class="text">
              {{ count.week }}
            </div>
          </el-card>
        </el-col>
        <el-col :sm="4">
          <el-card class="box-card" :body-style="cardBodyStyle">
            <div slot="header" class="clearfix">
              <span>本月</span>
            </div>
            <div class="text">
              {{ count.month }}
            </div>
          </el-card>
        </el-col>
        <el-col :sm="4">
          <el-card class="box-card" :body-style="cardBodyStyle">
            <div slot="header" class="clearfix">
              <span>本年</span>
            </div>
            <div class="text">
              {{ count.year }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-loading="loadDate" class="box-card">
      <el-row :gutter="0">
        <el-col :sm="24">
          <el-date-picker
            v-model="range_date"
            type="daterange"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="max-width:280px"
            @change="echartDateChange()"
          />
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :sm="24">
          <div id="echartDate" :style="{height:height-100+'px'}"/>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-divider/>
      <el-row v-loading="loadField" :gutter="0">
        <el-col :sm="24">
          <div id="echartLine" :style="{height:height+'px'}"/>
        </el-col>
      </el-row>
      <el-divider/>
      <el-row v-loading="loadField" :gutter="0">
        <el-col :sm="24">
          <div id="echartPie" :style="{height:height+'px'}"/>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// ECharts
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import {LineChart, BarChart, PieChart} from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {LegendComponent, TitleComponent, TooltipComponent, GridComponent} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers'
// 注册必须的组件
echarts.use([LegendComponent, TitleComponent, TooltipComponent, GridComponent, LineChart, BarChart, PieChart, CanvasRenderer])

import screenHeight from '@/utils/screen-height'
import {chart} from '@/api/admin/member'

export default {
  name: 'AdminMemberChart',
  components: {},
  data() {
    return {
      height: 600,
      loadNum: false,
      loadDate: false,
      loadField: false,
      count: {
        total: '--',
        yesterday: '--',
        today: '--',
        week: '--',
        month: '--',
        year: '--'
      },
      range_date: [],
      member: '',
      cms: '',
      file: '',
      fieldValue: 'member',
      fieldLabel: '会员',
      cardBodyStyle: {
        padding: '10px 0px 0px 0px'
      }
    }
  },
  created() {
    this.height = screenHeight()
    this.chart()
  },
  methods: {
    chart() {
      this.loadNum = true
      chart().then(res => {
        this.count = res.data.count
        this.dates = res.data.member.dates
        this.member = res.data.member
        this.cms = res.data.cms
        this.file = res.data.file
        this.echartDate(res.data.member)
        this.echartLine(res.data.cms)
        this.echartPie(res.data.file)
        this.loadNum = false
      }).catch(() => {
        this.loadNum = false
      })
    },
    echartDateChange() {
      this.loadDate = true
      chart({
        type: 'date', date: this.dates
      }).then(res => {
        this.echartDate(res.data.member)
        this.loadDate = false
      }).catch(() => {
        this.loadDate = false
      })
    },
    echartDate(data) {
      var echart = echarts.init(document.getElementById('echartDate'))
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.days
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            smooth: true,
            data: data.totals,
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      }
      echart.setOption(option)
    },
    echartLine(data) {
      var echart = echarts.init(document.getElementById('echartLine'))
      var option = {
        title: {
          text: ''
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.days
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            data: data.counts,
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      }
      echart.setOption(option)
    },
    echartPie(data) {
      var echart = echarts.init(document.getElementById('echartPie'))
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '3%',
          top: '20px'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            itemStyle: {
              borderRadius: 8,
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c} ({d}%)'
                },
                labelLine: {show: true}
              }
            },
            data: data.counts
          }
        ]
      }
      echart.setOption(option)
    }
  }
}
</script>

<style scoped>
.box-card {
  text-align: center;
}

.box-card .text {
  text-align: center;
  color: #666;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}
</style>
